<template>
  <view>
    <view class="main-container">
      <view class="option-container" v-if="isLogin">
        <view class="option-item" @tap.stop.prevent="showPop">
          <text v-if="!selectDate">本月</text>
          <text v-if="selectDate">{{ startDate }} ~ {{ endDate }}</text>
          <image class="icon-arrow"
            :src="staticBaseUrl + '/static/pointsPkg/image/' + (detailType == 0 && show ? 'icon_drop-down@2x.png' : 'icon_sel@2x.png')">
          </image>
        </view>
        <view class="grownPoints">
          <text>{{ growthValue ? growthValue : '0' }}</text>
          成长值
        </view>
      </view>

      <u-popup :overlay="true" :show="show" mode="top" custom-style="height: 250rpx;" @close="onClose">
        <view class="popup-container">
          <view class="filter-container">
            <!-- <text wx:for="{{detailOption[detailType]}}" wx:key="index" data-item="{{item}}" data-index="{{index}}"
          class="filter-item {{ detailOptionSelect[detailType].index==index ? 'filter-active':''}}"
          catchtap="selectOption">{{item.text}}</text> -->
            <view class="date-container">
              <picker mode="date" :value="startDate" :start="minStartDate" :end="endDate" @change="bindStartDate">
                <view class="date-picker">开始：{{ startDate }}</view>
              </picker>
              <text>--</text>
              <picker mode="date" :value="endDate" :start="startDate" :end="maxEndDate" @change="bindEndDate">
                <view class="date-picker">结束：{{ endDate }}</view>
              </picker>
            </view>
          </view>
          <view class="filter-btns">
            <text class="reset-btn btn" @tap.stop.prevent="resetOption">重置</text>
            <text class="comfirm-btn btn" @tap.stop.prevent="onClose">确定</text>
          </view>
        </view>
      </u-popup>

      <view class="detail-order-container">
        <view class="detail-order-list" v-if="growthRecords && growthRecords.length > 0">
          <view class="detail-order-item">
            <!-- <view class="detail-order-header">
          <view class="detail-header-left">
            <text class="detail-order-month">{{item.month}}</text>
            <text>月</text>
          </view>
          <view class="detail-header-right">
            <view class="header-right-item1">获取 <text class="font-yellow">{{item.monthPoint}}</text></view>
          </view>
        </view> -->
            <view class="detail-list">
              <view class="detail-item" v-for="(order, index) in growthRecords" :key="index">
                <view class="detail-item-left">
                  <view class="detail-left-line1">{{ order.Memo }}</view>
                  <view class="detail-left-line2">
                    <text class="detail-time">{{ util.formatTimeAddLine(order.OrderTime) }}</text>
                  </view>
                </view>

                <view
                  :class="'detail-item-right ' + (order.AftEffectiveValue < order.PreEffectiveValue ? 'consume-point' : 'add-point')">
                  {{ order.AftEffectiveValue >= order.PreEffectiveValue ? '+' : '-' }}{{ order.ChangeValue }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="!growthRecords || growthRecords.length == 0" class="empty-container">
          <image class="empty-img" src="/static/image/home_ic_empty@2x.png"></image>
          <view>暂无相关记录</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
  import {
    http
  } from '@/utils/commonRequest.js'; // 局部引入 
  // import vanPopup from '@vant/weapp/popup/index';
  const app = getApp();

  const util = require('../../../utils/util.js');
	import {
		staticBaseUrl
	} from '@/utils/constant.js'
  var defaultDetailOption = [{
      text: '全部',
      value: null,
      index: 0
    },
    {
      text: '本月',
      value: null,
      index: 0
    }
  ]; //积分明细的初始化查询条件

  export default {
    components: {
      // vanPopup
    },
    data() {
      return {
				staticBaseUrl: staticBaseUrl,
        haveMore: true,

        queryParams: {
          StartDate: '',
          EndDate: '',
          PageSize: 8,
          PageNo: 1
        },
        isLogin: false,

        //是否登录
        searchType: 0,

        //查询类型  0:兑换记录，1:积分明细
        exType: 0,

        //兑换记录查询条件 0:积分类型，1:兑换状态，2:月份
        detailType: 0,

        //积分明细查询条件 0:全部状态 1:月份
        show: false,

        //是否显示弹窗
        detailOptionSelect: JSON.parse(JSON.stringify(defaultDetailOption)),

        //选择的积分明细的查询条件
        detailOption: [
          [{
              text: '全部',
              value: 0
            },
            {
              text: '获取',
              value: 1
            },
            {
              text: '使用',
              value: 2
            },
            {
              text: '已过期',
              value: 3
            }
          ],
          [{
              text: '本月',
              value: 0
            },
            {
              text: '六月',
              value: 1
            },
            {
              text: '五月',
              value: 2
            },
            {
              text: '四月',
              value: 3
            }
          ]
        ],

        // 积分明细的查询条件
        detailOrderList: [{
          id: 0,
          month: 9,
          monthPoint: 40,
          monthUsedPoint: 123456,
          orderList: [{
              id: 0,
              desc: '平台登录送积分_日常登录奖励',
              time: '2021.07.18  20:30:02',
              sourceType: 0,
              type: 0,
              point: 10
            },
            {
              id: 1,
              desc: '平台登录送积分_日常登录奖励',
              time: '2021.07.18  20:30:02',
              sourceType: 1,
              type: 1,
              point: 10
            }
          ]
        }],

        selectDate: false,

        //是否选择查询时间
        growthValue: 0,

        growthRecords: [],
        startDate: '',
        endDate: '',
        minStartDate: '',
        maxEndDate: '',
        detailTypeOptionIndex: 0,

        order: {
          id: '',
          Memo: '',
          AftEffectiveValue: 0,
          PreEffectiveValue: 0,
          ChangeValue: ''
        }
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
      let currentYear = new Date().getFullYear();
      let currentMonth = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() +
        1;
      let currentDay = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate(); //日期保留两位数
      let startDate = currentYear + '-' + currentMonth + '-' + '01';
      let endDate = currentYear + '-' + currentMonth + '-' + currentDay;
      this.initStartDate = startDate;
      this.initEndDate = endDate; //最多可以查询一年的记录

      let minStartDate = currentYear - 1 + '-' + currentMonth + '-' + currentDay;
      let maxEndDate = endDate;
      this.startDate = startDate
      this.endDate = endDate
      this.minStartDate = minStartDate
      this.maxEndDate = maxEndDate
      this.$checkLogin().then((res) => {
        // if (res == 'authed') {
          this.getGrownValueList();
        // }
      });
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      let Page = getCurrentPages()[getCurrentPages().length - 2];
      let userInfo = Page.userInfo;

      if (!util.isEmpty(userInfo)) {
        this.growthValue = userInfo.growthValue
      }

      this.$checkLogin().then((res) => {
        // if (res == 'authed') {
        this.isLogin = true
        // }
      });
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
      if (this.haveMore) {
        this.getGrownValueList();
      }
    },
    methods: {

      back(){
        uni.navigateBack()
      },
      //获取成长值列表
    //   getGrownValueList: function() {
    //     http.post('/zsnsh/memberUser/mbrsysGrowthRecordsList', this.grownValueParams, {
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	}
				// }).then((res) => {
    //       console.log(res);

    //       if (res.data.code == '200') {
    //         this.isLogin = true
    //         this.getGrownValueList();
    //       }
    //     });
    //   },

      bindStartDate: function(e) {
        this.startDate = e.detail.value
      },

      bindEndDate: function(e) {
        this.endDate = e.detail.value
      },

      //获取成长值列表
      getGrownValueList: function() {
        let that = this;
        let startDate = this.startDate.replaceAll('-', '');
        let endDate = this.endDate.replaceAll('-', '');
        this.queryParams.StartDate = startDate;
        this.queryParams.EndDate = endDate;
        console.log(this.queryParams);
        let params = that.queryParams;
        let list = that.growthRecords ? that.growthRecords : [];
        http.post('/zsnsh/memberUser/mbrsysGrowthRecordsList', params, {
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
          .then((res) => {
            console.log(res);

            if (res.data.code == '200') {
              let records = res.data.tallyInfo.GrowthRecords;

              if (records && records.length < that.queryParams.PageSize) {
                that.haveMore = false;
              } else {
                that.queryParams.PageNo++;
              }
              this.growthRecords = [...list, ...records]
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },

      /**
       * 显示选择弹窗
       * @param {*} e
       */
      showPop: function(e) {
        var exType = this.exType;
        var detailType = this.detailType;
        detailType = e.currentTarget.dataset.detailType;
        this.detailTypeOptionIndex = 0
        this.show = true
        this.exType = exType
        this.detailType = detailType
      },

      /**
       *重置查询条件
       */
      resetOption: function() {
        //对象变量需要深复制
        // this.setData({
        //   detailOptionSelect: JSON.parse(JSON.stringify(defaultDetailOption))
        // })
        let that = this;
        this.show = false
        this.selectDate = false
        this.startDate = that.initStartDate
        this.endDate = that.initEndDate
        this.growthRecords = []
        this.queryParams.PageNo = 1;
        this.getGrownValueList();
      },

      /**
       * 确定按钮/关闭弹窗时触发
       */
      onClose() {
        this.show = false
        this.selectDate = true
        this.growthRecords = []
        this.queryParams.PageNo = 1;
        this.getGrownValueList();
      },

      /**
       * 选择查询条件
       * @param {*} e
       */
      selectOption: function(e) {
        var index = e.currentTarget.dataset.index;
        var item = e.currentTarget.dataset.item;
        item.index = index;
        var detailType = this.detailType;
        var detailOptionSelect = this.detailOptionSelect;
        detailOptionSelect[detailType] = item;
        this.detailOptionSelect = detailOptionSelect
        console.log(this.detailOptionSelect);
      }
    }
  };
</script>
<style>
  /* @import './../pointsRecord/pointsRecord.js.css'; */

  .van-popup--top {
    /* top: 110rpx !important; */
    top: 0rpx !important;
  }

  .option-container {
    margin-bottom: 30rpx;
    box-shadow: 0px 14px 34px 6px rgba(182, 178, 199, 0.2);
    display: flex;
    justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 20rpx 50rpx 0;
    position: relative;
    z-index: 99999;
  }

  .grownPoints {
    left: 140rpx;
    color: #333;
    font-size: 24rpx;
    text-align: right;
  }

  .grownPoints text {
    color: #000;
    font-size: 48rpx;
    font-weight: bolder;
    vertical-align: middle;
    margin-right: 16rpx;
  }

  .font-yellow {
    color: #ff6e42 !important;
  }




  /* 空列表 */
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #999;
    padding-top: 200rpx;
  }

  .empty-img {
    width: 644rpx;
    height: 310rpx;
  }

  .date-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 28rpx;
    color: #333;
  }

  .date-picker {
    line-height: 2;
    padding: 0px 20rpx;
    border-radius: 12rpx;
    background-color: #efefef;
  }


  .nav-container {
    position: sticky;
    top: 0;
    z-index: 102;
    display: flex;
    padding-left: 54rpx;
    height: 118rpx;
    padding-top: 36rpx;
    /* border-bottom: 1px solid rgba(182, 178, 199, 0.2); */
    box-shadow: 0px 14rpx 34rpx 6rpx rgba(182, 178, 199, 0.2);
    background-color: #fff;
  }

  .nav-item {
    position: relative;
    margin-right: 48rpx;
    line-height: 44rpx;
    color: #666;
    font-size: 32rpx;
  }

  .active {
    font-size: 36rpx;
    color: #000;
    font-weight: bold;
    line-height: 50rpx;
  }

  .active::after {
    position: absolute;
    content: ' ';
    width: 94%;
    height: 8rpx;
    bottom: 10rpx;
    left: 3%;
    background: #ff5642;
    border-radius: 4rpx;
  }

  .option-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    font-size: 28rpx;
    height: 92rpx;
    line-height: 40rpx;
    color: #3f4548;
  }

  .option-active {
    background: #fff8f8;
    border-radius: 24rpx 24rpx 0px 0px;
    color: #ff6e42;
    overflow: hidden;
  }

  .icon-arrow {
    margin-left: 6rpx;
    width: 32rpx;
    height: 32rpx;
    flex-shrink: 0;
  }

  /* 弹出框样式 */

  .popup-container {
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fffafa;
  }

  .filter-container {
    overflow-x: scroll;
    display: flex;
    align-items: center;
    padding: 40rpx 48rpx;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

  .filter-item {
    padding: 0 28rpx;
    line-height: 56rpx;
    color: #999;
    font-size: 28rpx;
    background: #fff;
    border-radius: 28rpx;
    margin-right: 32rpx;
    flex-shrink: 0;
  }

  .filter-active {
    background-color: rgba(255, 110, 66, 0.1);
    color: #ff6e42;
  }

  .filter-btns {
    display: flex;
  }

  .btn {
    flex: 0 0 50%;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }

  .reset-btn {
    background-color: #fff;
    color: #000;
  }

  .comfirm-btn {
    color: #fff;
    background: #ff6e42;
  }

  /* 兑换订单列表 */

  .order-list {
    margin-top: 100rpx;
    padding: 0 24rpx;
  }

  .order-item {
    /* height: 222rpx; */
    padding: 24rpx;
    box-shadow: 0px 20rpx 60rpx 0px rgba(112, 136, 210, 0.1);
    border-radius: 16rpx;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 24rpx;
  }

  .order-item-line1,
  .order-item-line2,
  .order-item-line3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-item-line1 {
    margin-top: 28rpx;
  }

  .line1-left {
    line-height: 28rpx;
    font-size: 24rpx;
    color: #999;
  }

  .line1-right {
    line-height: 42rpx;
    font-size: 30rpx;
    line-height: 42rpx;
    font-weight: bold;
    color: #999;
  }

  .red-color {
    color: #ed171f;
  }

  .order-item-line2 {
    /* margin-top: 26rpx; */
    font-size: 30rpx;
    color: #000;
    line-height: 42rpx;
  }

  .line2-left {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 486rpx;
    font-weight: bold;
  }

  .line2-right {}

  .order-item-line3 {
    margin-top: 24rpx;
  }

  .line3-left {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 24rpx;
  }

  .line3-right {
    color: #999;
    font-size: 24rpx;
  }

  .order-amount {
    margin-left: 10rpx;
    letter-spacing: -1px;
  }

  .green-type,
  .yellow-type {
    margin-left: 24rpx;
    border-radius: 4rpx;
    font-size: 24rpx;
    line-height: 38rpx;
    padding: 0 10rpx;
  }

  .green-type {
    background: rgba(68, 215, 182, 0.06);
    color: #44d7b6;
    border: 1px solid #adfceb;
  }

  .yellow-type {
    background: rgba(255, 110, 66, 0.06);
    border: 1px solid #ffd7cb;
    color: #ff6e42;
  }

  /* 明细订单列表 */

  .detail-order-container {
    padding: 0 30rpx;
  }

  .curr-point-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 24rpx auto;
    padding: 0 24rpx;
    width: 94%;
    height: 100rpx;
    color: #000;
    top: 80rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: #fff;
  }

  .point-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .curr-point-content {
    position: relative;
    display: flex;
    align-items: center;
  }

  .curr-point-title {
    font-size: 40rpx;
    line-height: 56rpx;
    font-weight: bold;
  }

  .curr-point {
    display: flex;
    align-items: center;
    font-size: 24rpx;
  }

  .curr-local-point {
    display: flex;
    align-items: center;
    margin-right: 40rpx;
  }

  .icon {
    margin-right: 18rpx;
    width: 48rpx;
    height: 48rpx;
  }

  .local-point-num {
    font-size: 48rpx;
    font-weight: 600;
    margin-right: 16rpx;
  }

  .local-point-txt {
    font-size: 24rpx;
    color: #666;
    position: relative;
    top: 4rpx;
  }

  .detail-order-list {}

  .detail-order-item {
    overflow: hidden;
    margin-bottom: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;
  }

  .detail-order-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    height: 110rpx;
    box-shadow: 0px 6rpx 32rpx 6rpx rgba(182, 178, 199, 0.2);
  }

  .detail-header-left {
    display: flex;
    align-items: flex-end;
    color: #000;
    font-size: 24rpx;
  }

  .detail-order-month {
    font-size: 54rpx;
    font-weight: bold;
    line-height: 66rpx;
  }

  .detail-header-right {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: bold;
  }

  .header-right-item1 {
    margin-right: 30rpx;
  }

  .font-yellow {
    color: #ff6e42;
  }

  .detail-list {
    padding: 0 24rpx;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    height: 136rpx;
    padding-top: 26rpx;
    border-bottom: 1px solid #eaeaea;
  }

  .detail-item:last-child {
    border-bottom: none;
  }

  .detail-item-left {
    flex-shrink: 0;
    width: 520rpx;
  }

  .detail-left-line1 {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 28rpx;
    color: #000;
    line-height: 36rpx;
  }

  .detail-left-line2 {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
  }

  .detail-time {
    color: #999;
    font-size: 20rpx;
  }

  .detail-item-right {
    flex: 1;
    font-size: 28rpx;
    text-align: right;
  }

  .consume-point {
    color: #666;
  }

  .add-point {
    font-weight: bold;
    color: #ff6e42;
  }

  /* 空列表 */
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #999;
    padding-top: 200rpx;
  }

  .empty-img {
    width: 644rpx;
    height: 310rpx;
  }

  .date-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 28rpx;
    color: #333;
  }

  .date-picker {
    line-height: 2;
    padding: 0px 20rpx;
    border-radius: 12rpx;
    background-color: #efefef;
  }
</style>
